<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="/lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
    <script src="/js/echarts.min.js" charset="utf-8"></script>
</head>

<body>
    <div id="main" style="width: 600px; height:400px;"></div>

    <script>
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        var option;

        $.ajax({
            url: "http://localhost:8080/floorTable/pieTable",
            data: {},
            success: function (result) {
                var brandList = [];
                var brandCount = [];
                var arr = result.data.brandPie;
                for (var i = 0; i < arr.length; i++) {
                    brandList.push(arr[i].brand);
                    brandCount.push(arr[i].count);
                }
                console.log(brandList)
                console.log(brandCount)
                option = {
  backgroundColor: '#2c343c',
  title: {
    text: '品牌比例饼状图',
    left: 'center',
    top: 20,
    textStyle: {
      color: '#ccc'
    }
  },
  tooltip: {
    trigger: 'item'
  },
  visualMap: {
    show: false,
    min: 80,
    max: 600,
    inRange: {
      colorLightness: [0, 1]
    }
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '55%',
      center: ['50%', '50%'],
      data: [
        { value: brandCount[0], name: brandList[0] },
        { value: brandCount[1], name: brandList[1] },
        { value: brandCount[2], name: brandList[2] },
        { value: brandCount[3], name: brandList[3] },

      ].sort(function (a, b) {
        return a.value - b.value;
      }),
      roseType: 'radius',
      label: {
        color: 'rgba(255, 255, 255, 0.3)'
      },
      labelLine: {
        lineStyle: {
          color: 'rgba(140, 163, 131, 0.3)'
        },
        smooth: 0.2,
        length: 10,
        length2: 20
      },
      itemStyle: {
        color: '#c23531',
        shadowBlur: 200,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
      },
      animationType: 'scale',
      animationEasing: 'elasticOut',
      animationDelay: function (idx) {
        return Math.random() * 200;
      }
    }
  ]
};

        myChart.setOption(option);
              }
            })





    </script>
</body>

</html>